import React, { Suspense } from 'react';
import { HashRouter, Route, Routes } from 'react-router-dom'
import Home from '@/components/Home.jsx'



import LifeCyclyParent from '@/components/classComponents/lifeCycle/LifeCyclyParent.jsx'
import SetStateTest from '@/components/classComponents/setState/SetStateTest.jsx'
import Hooks from '@/components/functionComponents/hooks/Hooks.jsx'
import UseState from '@/components/functionComponents/hooks/UseState.jsx'
import UseContext from '@/components/functionComponents/hooks/UseContext/UseContext.jsx'
import UseEffect from '@/components/functionComponents/hooks/useEffect/UseEffect'
import UseReducer from '@/components/functionComponents/hooks/useReducer/UseReducer'
import UseContentAndUseReducer from '@/components/functionComponents/hooks/useReducer/useContent_useReducer/Parent'
import UseMemo from '@/components/functionComponents/hooks/useMemo/UseMemo'
import UseCallback from '@/components/functionComponents/hooks/useCallback/UseCallback'
import Memo from '@/components/functionComponents/hooks/memo/Memo'



import UseRef from '@/components/functionComponents/hooks/useRef/UseRef.jsx'
import NoMatch from '@/components/NoMatch.jsx'
import Layout from '@/components/layout/Layout.jsx'
import FunctionComponents from '@/components/functionComponents/FunctionComponents.jsx'
import ClassComponents from '@/components/classComponents/ClassComponents.jsx'
import RouterTest from '@/components/router/RouterTest.jsx'
import CreateRef from '@/components/classComponents/createRef/CreateRef.jsx'
import CreateContext from '@/components/classComponents/createContext/CreateContext.jsx'
// import CustomHooks01 from '@/components/functionComponents/hooks/customhooks/test01/CustomHooks.jsx'
// import CustomHooks02 from '@/components/functionComponents/hooks/customhooks/test02/CustomHooks.jsx'

import ParentChildCall from '@/components/functionComponents/parentChildCall/ParentChildCall.jsx'
import ChildCallParentOfParent from '@/components/functionComponents/parentChildCall/childCallParent/ChildCallParentOfParent.jsx'
import ParentCallChildOfParent from '@/components/functionComponents/parentChildCall/parentCallChild/ParentCallChildOfParent.jsx'
import ObtainNestChildComponent from '@/components/functionComponents/parentChildCall/obtainNestChildComponent/ObtainNestChildComponent.jsx'
/**
 * 代码分割,需要在路由中使用Suspense
 */
const CustomHooks01 = React.lazy(() => import('@/components/functionComponents/hooks/customhooks/test01/CustomHooks.jsx'));
const CustomHooks02 = React.lazy(() => import('@/components/functionComponents/hooks/customhooks/test02/CustomHooks.jsx'));


function AppRouters() {
  return (
    <div className="App">
      {/* Suspense是代码分割使用 */}
      <Suspense fallback={<div>Loading...</div>}> 
      <HashRouter>
        <Routes>
          <Route path="/" element={<Layout></Layout>}>
            <Route index element={<Home />} />
            <Route path="/home" element={<Home />} />
            <Route path="/classComponent" element={<ClassComponents />}>
              <Route path="lifeCycle" element={<LifeCyclyParent />} />
              <Route path="setStateTest" element={<SetStateTest />} />
              <Route path="createRef" element={<CreateRef />} />
              <Route path="createContext" element={<CreateContext />} />
              
              

            </Route>

            <Route path="/functionComponent" element={<FunctionComponents />}>

              <Route path="parentChildCall" element={<ParentChildCall />}>
                <Route path="childCallParent" element={<ChildCallParentOfParent />} />
                <Route path="parentCallChild" element={<ParentCallChildOfParent />} />
                <Route path="obtainNestChildComponent" element={<ObtainNestChildComponent />} />
              </Route>
              <Route path="hooks" element={<Hooks />}>
                <Route path="useState" element={<UseState />} />
                <Route path="useContext" element={<UseContext />} />
                <Route path="useRef" element={<UseRef />} />
                <Route path="useEffect" element={<UseEffect />} />
                <Route path="useReducer" element={<UseReducer />} />
                <Route path="useMemo" element={<UseMemo />} />
                <Route path="memo" element={<Memo />} />
                <Route path="useCallback" element={<UseCallback />} />
                

                
                <Route path="useContextAnduseReducer" element={<UseContentAndUseReducer />} />

                <Route path="CustomHooks01" element={<CustomHooks01 />} />
                <Route path="CustomHooks02" element={<CustomHooks02 />} />

              </Route>
            </Route>
            <Route path="routerTest/*" element={<RouterTest />}></Route>

            <Route path="*" element={<NoMatch />} />
          </Route>
        </Routes>
      </HashRouter>
      </Suspense>
    </div>
  )
}

export default AppRouters
